<template>
  <!-- 主容器，支持暗黑模式 -->
  <view class="container" :class="{ dark: isDark }">
    <!-- 自定义导航栏 -->
    <view class="nav-bar" :class="{ dark: isDark }">
      <view class="nav-back" @click="goBack"><</view>
      <view class="nav-title">音乐播放器</view>
    </view>

    <!-- 音乐封面和信息展示区 -->
    <view class="cover-section">
      <!-- 音乐封面图片 -->
      <image class="music-cover" :src="music.coverUrl" mode="aspectFill" />
      <!-- 音乐标题 -->
      <text class="music-title">{{ music.title }}</text>
      <!-- 艺术家 -->
      <text class="music-artist">{{ music.artist }}</text>
    </view>

    <!-- 控制区域 -->
    <view class="control-panel">
      <!-- 播放进度滑块 -->
      <slider
        :value="currentTime"
        :min="0"
        :max="music.duration"
        @changing="onSliderChanging"
        @change="onSliderChange"
        activeColor="#ff6b35"
        backgroundColor="#f0f0f0"
      />

      <!-- 播放时间显示 -->
      <view class="time-labels">
        <text>{{ formatTime(currentTime) }}</text>
        <text>{{ formatTime(music.duration) }}</text>
      </view>

      <!-- 播放/暂停按钮 -->
      <view class="button-group">
        <view class="control-btn" @click="togglePlay">
          <text class="btn-icon">{{ isPlaying ? '⏸️' : '▶️' }}</text>
          <text class="btn-label">{{ isPlaying ? '暂停' : '播放' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      // 音乐信息对象
      music: {
        title: '',       // 音乐标题
        artist: '',      // 艺术家
        coverUrl: '',    // 封面图URL
        src: '',         // 音频文件URL
        duration: 0      // 音乐总时长(秒)
      },
      currentTime: 0,    // 当前播放进度(秒)
      isPlaying: false,  // 是否正在播放
      audio: null,       // 音频上下文实例
      isDark: false      // 是否暗黑模式
    }
  },

  // 页面加载生命周期
  onLoad() {
    // 获取音乐信息
    this.fetchMusicInfo();
  },
  
  // 页面显示生命周期
  onShow() {
    // 获取全局暗黑模式设置
    const dark = getApp().globalData.darkMode;
    this.isDark = dark;
  
    // 根据暗黑模式设置界面样式
    if (dark) {
      uni.setTabBarStyle({
        backgroundColor: '#1e1e1e',
        borderStyle: 'black',
        color: '#999999',
        selectedColor: '#ffffff'
      });
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#1e1e1e'
      });
    } else {
      uni.setTabBarStyle({
        backgroundColor: '#ffffff',
        borderStyle: 'black',
        color: '#7A7E83',
        selectedColor: '#fb7e29'
      });
      uni.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#F8F8F8'
      });
    }
  },
  
  // 方法定义
  methods: {
    /**
     * 返回上一页
     */
    goBack() {
      uni.navigateBack();
    },

    /**
     * 从服务器获取音乐信息
     */
    fetchMusicInfo() {
      uni.request({ 
        url: 'https://localhost:8080/api/music', 
        success: (res) => {
          const data = res.data;
          // 更新音乐信息
          this.music = {
            title: data.title,
            artist: data.artist,
            coverUrl: data.coverUrl,
            src: data.src,
            duration: 0 // 由播放器获取真实时长
          };
          // 初始化播放器
          this.initAudio(); 
        },
        fail: () => {
          uni.showToast({ title: '音乐加载失败', icon: 'none' });
        }
      });
    },

    /**
     * 初始化音频播放器
     */
    initAudio() {
      // 创建音频上下文
      this.audio = uni.createInnerAudioContext();
      // 设置音频源
      this.audio.src = this.music.src;

      // 音频可以播放时触发
      this.audio.onCanplay(() => {
        // 延迟获取时长，确保能获取到
        setTimeout(() => {
          const realDuration = Math.floor(this.audio.duration);
          if (realDuration > 0) {
            this.music.duration = realDuration;
          }
        }, 500);
      });

      // 播放进度更新时触发
      this.audio.onTimeUpdate(() => {
        this.currentTime = Math.floor(this.audio.currentTime);
      });

      // 播放结束时触发
      this.audio.onEnded(() => {
        this.isPlaying = false;
      });
    },

    /**
     * 切换播放/暂停状态
     */
    togglePlay() {
      if (!this.audio) return;

      if (this.isPlaying) {
        this.audio.pause(); // 暂停
      } else {
        this.audio.play();  // 播放
      }
      this.isPlaying = !this.isPlaying;
    },

    /**
     * 滑块拖动中(实时更新显示但不跳转)
     * @param {Object} e - 事件对象
     */
    onSliderChanging(e) {
      this.currentTime = e.detail.value;
    },

    /**
     * 滑块拖动结束(跳转到指定位置)
     * @param {Object} e - 事件对象
     */
    onSliderChange(e) {
      if (this.audio) {
        this.audio.seek(e.detail.value);
      }
    },

    /**
     * 格式化时间为 MM:SS 格式
     * @param {number} seconds - 秒数
     * @returns {string} 格式化后的时间字符串
     */
    formatTime(seconds) {
      const m = String(Math.floor(seconds / 60)).padStart(2, '0');
      const s = String(seconds % 60).padStart(2, '0');
      return `${m}:${s}`;
    }
  },

  // 页面卸载生命周期
  onUnload() {
    // 销毁音频实例，防止内存泄漏
    if (this.audio) {
      this.audio.destroy();
    }
  }
}
</script>
<style lang="scss">
// 导入全局样式
@import "@/common/page-style.scss";

/* 主容器样式 */
.container {
  background: #f5f5f5;
  min-height: 100vh;
  padding: 40rpx;
}

/* 音乐封面区域样式 */
.cover-section {
  text-align: center;
  margin-bottom: 60rpx;

  /* 封面图片样式 */
  .music-cover {
    width: 300rpx;
    height: 300rpx;
    border-radius: 30rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
    margin-bottom: 30rpx;
  }

  /* 音乐标题样式 */
  .music-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }

  /* 艺术家样式 */
  .music-artist {
    font-size: 24rpx;
    color: #888;
  }
}

/* 控制面板样式 */
.control-panel {
  background: #fff;
  border-radius: 40rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}

/* 时间标签样式 */
.time-labels {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
  margin-top: 20rpx;
}

/* 按钮组样式 */
.button-group {
  display: flex;
  justify-content: center;
  margin-top: 50rpx;
}

/* 控制按钮样式 */
.control-btn {
  width: 120rpx;
  height: 120rpx;
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.3);
}

/* 按钮图标样式 */
.btn-icon {
  font-size: 40rpx;
  margin-bottom: 6rpx;
}

/* 按钮文字样式 */
.btn-label {
  font-size: 20rpx;
  color: #fff;
  font-weight: 500;
}

/* 暗黑模式样式覆盖 */
.container.dark {
  background: #121212;
  color: #e0e0e0;
}

.container.dark .control-panel {
  background: #1e1e1e;
  box-shadow: none;
}

.container.dark .time-labels {
  color: #aaa;
}

.container.dark .music-title {
  color: #fff;
}

.container.dark .music-artist {
  color: #bbb;
}

/* 导航栏暗黑模式样式 */
.nav-bar.dark {
  background: #1e1e1e;
  color: #fff;
}

.nav-bar.dark .nav-title,
.nav-bar.dark .nav-back {
  color: #fff;
}
</style>